<template>
  <div class="my-container" v-if="user && user.nickname">
    <div class="user">
      <div class="user-info">
        <div class="left">
          <div class="name">{{ user.nickname }}</div>
          <span class="mark">{{ user.intro }}</span>
        </div>
        <div class="right" @click="toInfo">
          <img :src="baseUrl + user.avatar" alt="" />
        </div>
      </div>
      <div class="count">
        <div class="item">
          <div class="num">{{ user.submitNum }}</div>
          <div class="text">累计答题</div>
        </div>
        <div class="item">
          <div class="num">{{ user.collectQuestions.length }}</div>
          <div class="text">收藏题目</div>
        </div>
        <div class="item">
          <div class="num">{{ user.errorQuestions.length }}</div>
          <div class="text">我的错题</div>
        </div>
        <div class="item">
          <div class="num">
            {{
              Math.round(
                ((user.submitNum - user.errorNum) / user.submitNum) * 100
              ) + '%'
            }}
          </div>
          <div class="text">正确录</div>
        </div>
      </div>
      <div class="my-job">
        <van-cell
          class="mycell"
          title="我的岗位"
          :value="user.position"
          is-link
          @click="toEdit"
        >
          <template #icon>
            <i class="iconfont iconicon_mine_gangwei mypos"></i>
          </template>
        </van-cell>
      </div>
    </div>
    <div class="data">
      <div class="face">
        <h3>面经数据</h3>
        <div class="items">
          <div class="item">
            <div class="top">
              昨日阅读<span>+{{ user.shareData.read.yesterday }}</span>
            </div>
            <div class="center">{{ user.shareData.read.total }}</div>
            <div class="bottom">阅读总数</div>
          </div>
          <div class="item">
            <div class="top">
              昨日获赞<span>+{{ user.shareData.star.yesterday }}</span>
            </div>
            <div class="center">{{ user.shareData.star.total }}</div>
            <div class="bottom">获赞总数</div>
          </div>
          <div class="item">
            <div class="top">
              昨日新增<span>+{{ user.shareData.comment.yesterday }}</span>
            </div>
            <div class="center">{{ user.shareData.comment.total }}</div>
            <div class="bottom">评论总数</div>
          </div>
        </div>
      </div>
      <div class="option">
        <van-cell class="mycell" title="我的面经分享" value="23" is-link>
          <template #icon>
            <i class="iconfont iconicon_mine_gangwei mypos"></i>
          </template>
        </van-cell>
        <van-cell class="mycell" title="我的消息" value="23" is-link>
          <template #icon>
            <i class="iconfont iconicon_mine_xiaoxi mypos"></i>
          </template>
        </van-cell>
        <van-cell class="mycell" title="收藏题库" value="23" is-link>
          <template #icon>
            <i class="iconfont iconicon_mine_tikushoucang mypos"></i>
          </template>
        </van-cell>
        <van-cell class="mycell" title="收藏企业" value="23" is-link>
          <template #icon>
            <i class="iconfont iconicon_mine_qiyeshoucang mypos"></i>
          </template>
        </van-cell>
        <van-cell class="mycell" title="我的错误" value="23" is-link>
          <template #icon>
            <i class="iconfont iconicon_mine_cuoti mypos"></i>
          </template>
        </van-cell>
        <van-cell class="mycell" title="面试经验" value="23" is-link>
          <template #icon>
            <i class="iconfont iconbtn_shoucang_sel mypos"></i>
          </template>
        </van-cell>
      </div>
    </div>
  </div>
</template>

<script>
// 导入vuex工具函数
import { mapState } from 'vuex'
export default {
  data () {
    return {
      // 基地址
      baseUrl: process.env.VUE_APP_URL
    }
  },
  computed: {
    // 获取vuex中user数据
    ...mapState(['user'])
  },
  methods: {
    // 跳转到编辑页面
    toEdit () {
      this.$router.push('/editInfo?prop=position')
    },
    // 跳转到我的资料页面
    toInfo () {
      this.$router.push('/home/info')
    }
  }
}
</script>

<style lang="less" scoped>
.my-container {
  padding-bottom: 70px;
  background-color: #f7f4f5;
  .user {
    padding: 0 15px;
    height: 216px;
    background: linear-gradient(45deg, #ce0031, #b8002c);
    color: #fff;
    .user-info {
      padding-top: 30px;
      display: flex;
      justify-content: space-between;
      .left {
        .name {
          font-size: 21px;
        }
        .mark {
          font-size: 12px;
          opacity: 0.7;
        }
      }
      .right {
        img {
          width: 50px;
          height: 50px;
          opacity: 1;
          border: 3px solid rgba(255, 255, 255, 0.38);
          border-radius: 50%;
        }
      }
    }
    .count {
      margin-top: 30px;
      display: flex;
      .item {
        flex: 1;
        text-align: center;
        .num {
          font-size: 21px;
        }
        .text {
          margin-top: 4px;
          font-size: 12px;
          opacity: 0.7;
        }
      }
    }
    .my-job {
      margin-top: 20px;
      .mycell {
        border-radius: 6px;
      }
      .mypos {
        margin-right: 10px;
      }
    }
  }
  .data {
    margin-top: 25px;
    padding: 0 15px;
    margin-bottom: 20px;
    .face {
      background-color: #fff;
      padding: 0 15px 16px;
      border-radius: 6px;
      h3 {
        font-size: 14px;
        padding: 18px 0;
      }
      .items {
        font-size: 12px;
        display: flex;
        .item {
          flex: 1;
          text-align: center;
          .top {
            color: #b4b4bd;
            span {
              color: #2cc4db;
            }
          }
          .center {
            padding: 10px 0 5px;
            font-weight: 700;
            font-size: 21px;
          }
        }
      }
    }
    .option {
      margin-top: 10px;
      border-radius: 6px;
      overflow: hidden;
      .mypos {
        margin-right: 8px;
      }
    }
  }
}
</style>
